<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../lib/bootstrap.css">
    <script src="../lib/vue-2.6.7.js"></script>
</head>
<body>
<div id="app">
    <div class="container">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <label>
                    ID:
                    <input type="number" class="form-control" v-model="id">
                </label>
                <label>
                    Name:
                    <input type="text" class="form-control" v-model="name">
                </label>
                <label>
                    Date:
                    <input type="date" class="form-control" v-model="date">
                </label>
                <input type="button" value="添加" class="btn btn-primary" @click="add">
            </div>
        </div>

        <table class="table table-hover table-bordered table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Ctime</th>
                <th>Operation</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in list" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <td @click="remove"><a href="#">删除</a></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            list:[
                {id:1,name:"雷克萨斯ES",ctime:new Date().toLocaleDateString()},
                {id:2,name:"丰田亚洲龙",ctime:new Date().toLocaleDateString()},
                {id:3,name:"大众蔚领",ctime:new Date().toLocaleDateString()}
            ],
            name:"",
            id:"",
            date:new Date().toLocaleString()
        },
        methods: {
            add(){
                //id和name都是非空才赋值
                if (this.id&&this.name) {
                    this.list.push({id: this.id, name: this.name, ctime: this.date});
                    this.id=this.name="";
                }
            },
            remove(event) {
                console.log(event.target)
            }
        }
    });

</script>
</body>
</html>